<template>
  <div class="cart_container">
    <div class="cart_wrapper">
      <div class="cart_title">
        <h2>MY CART</h2>
      </div>
      <!-- 购物车数据渲染列表 -->
      <div class="cart_list_items">
        <!-- 购物车数据头部灰色标题 -->
        <div class="cart_list_title">
          <div class="item_items_title">ITEMS</div>
          <div class="item_price_title">PRICE</div>
          <div class="item_quantity_title">QUANTITY</div>
          <div class="item_subtotal_title">SUBTOTAL</div>
          <div class="item_edit_title">EDIT</div>
        </div>
        <!-- 动态添加的购物车数据渲染 -->
        <div class="item_wrapper">
          <div class="item_container" v-for="(item,index) in cartItems" :key="index">
            <div class="item_items_title">
              <!-- 商品选中框 -->
              <div class="item_checked">
                <input type="checkbox" @click="OnChecked(item)" :checked="item.checked"/>
              </div>
              <!-- 商品图片 -->
              <div class="item_img">
                <img :src="item.productImage" alt />
              </div>
              <!-- 商品名称 -->
              <div class="item_title">{{item.productName}}</div>
            </div>
            <!-- 商品价格 -->
            <div class="item_price_title">￥{{item.salePrice}}.00</div>
            <!-- 商品数量操作 -->
            <div class="item_quantity_title">
              <div @click="OnMinus(item)">-</div>
              <div class="subtotal_count">{{item.count}}</div>
              <div @click="OnPlus(item)">+</div>
            </div>
            <!-- 单个商品总价 -->
            <div class="item_subtotal_title">￥{{item.count * item.salePrice}}.00</div>
            <!-- 操作（删除） -->
            <div class="item_edit_title">
              <div>
                <img src="../assets/delete.png" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 购物车底部商品总价计算及全选操作 -->
      <div class="cart_bottom">
        <div class="cart_bottom_allchecked">
          <input type="checkbox" @click="OnAllChecked" :checked="allChecked" />
          Select all
        </div>
        <div class="cart_bottom_totalprice">
          Item total
          <font>￥{{totalPrice}}.00</font>
        </div>
        <div class="cart_bottom_button">CHECKOUT</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // cartItems: this.$store.state.cartItems,
      // allChecked: this.$store.state.allChecked
    };
  },
  filters:{

  },
  computed: {
    cartItems(){
      return this.$store.state.cartItems
    },
    allChecked(){
      return this.$store.state.allSelect
    },
    totalPrice(){
      return this.$store.state.totalPrice
    }
  },
  methods: {
    OnChecked(item) {
      console.log(item.checked,11111111)
      var status = event.target.checked
      this.$store.dispatch('CHANGE_CHECKED',{
        productId:item.productId,
        checked:status
      })
    },
    OnAllChecked() {
      var status = event.target.checked
      this.$store.dispatch('ALL_CHECKED',status)
      console.log(this.cartItems)
    },
    OnMinus(item){
      this.$store.dispatch('ITEM_COUNT_MINUS',item)
    },
    OnPlus(item){
      this.$store.dispatch('ITEM_COUNT_PLUS',item)
    }
  },
  mounted() {}
};
</script>

<style scoped>
.cart_container {
  width: 100%;
  height: 734px;
  background-color: #eee;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
}
.cart_wrapper {
  width: 90%;
  height: 200px;
  /* background-color: orange; */
}
.cart_title {
  width: 100%;
  height: 100px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.cart_list_items {
  width: 100%;
}
.cart_list_title {
  width: 100%;
  height: 40px;
  background-color: gray;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cart_list_title div {
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.item_items_title {
  width: 45%;
  height: 40px;
}
.item_price_title {
  width: 10%;
  height: 40px;
}
.item_quantity_title {
  width: 20%;
  height: 40px;
}
.item_subtotal_title {
  width: 15%;
  height: 40px;
}
.item_edit_title {
  width: 10%;
  height: 40px;
}
.item_wrapper {
  width: 100%;
}
.item_container {
  width: 100%;
  height: 120px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-bottom: 2px;
}
.item_container div {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.item_checked {
  width: 10%;
}
.item_img {
  width: 20%;
}
.item_img img {
  width: 80%;
  /* height: 100px; */
}
.item_title {
  width: 50%;
}
.item_container .item_subtotal_title {
  color: red;
}
.item_quantity_title div {
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  background-color: #eee;
}
.item_quantity_title div:hover {
  cursor: pointer;
}
.item_quantity_title .subtotal_count:hover {
  cursor: normal;
}
.item_quantity_title .subtotal_count {
  width: 50px;
  background-color: #fff;
}
.item_edit_title img {
  width: 22px;
}
.item_edit_title div:hover {
  cursor: pointer;
}
.cart_bottom {
  width: 90%;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 30px;
  background-color: #fff;
}
.cart_bottom_allchecked {
  width: 55%;
  height: 60px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.cart_bottom_allchecked input {
  margin-right: 10px;
  margin-left: 10%;
}
.cart_bottom_totalprice {
  width: 25%;
  height: 60px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 10%;
  color: gray;
}
.cart_bottom_totalprice font {
  color: red;
  margin-left: 10px;
}
.cart_bottom_button {
  width: 15%;
  height: 60px;
  background-color: red;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
